<template>
  <PageWrapper dense>
    <BasicTable @register="register">
      <template #toolbar>
        <div
          ><a-button type="primary" :loading="loading" @click="exportOrder">下载订单</a-button></div
        >
        <TableAction />
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: '订单详情',
              onClick: handleDetail.bind(null, record),
            },
            {
              label: '订单信息同步',
              onClick: handleSync.bind(null, record),
            },
            {
              label: '通知重发',
              onClick: handleResend.bind(null, record),
            },
          ]"
        />
      </template>
    </BasicTable>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { getBasicColumns, getFormConfig } from './listData';
  import { jsonToSheetXlsx } from '/@/components/Excel';
  import { useGo } from '/@/hooks/web/usePage';

  import { getList, orderSync, orderReSend } from '/@/api/abc/order';
  import { PageWrapper } from '/@/components/Page';
  import { useMessage } from '/@/hooks/web/useMessage';
  // import { useMessage } from '/@/hooks/web/useMessage';
  export default defineComponent({
    name: 'AbcOrderList',
    components: { BasicTable, PageWrapper, TableAction },
    emits: ['success', 'error'],
    setup(_, {}) {
      const go = useGo();
      const { createMessage } = useMessage();
      const inputRef = ref<HTMLInputElement | null>(null);
      let loading = ref(false);
      const [register, { getForm }] = useTable({
        title: '订单列表',
        api: getList,
        columns: getBasicColumns(),
        useSearchForm: true,
        formConfig: getFormConfig(),
        striped: false,
        showIndexColumn: false,
        canResize: false,
        bordered: true,
        actionColumn: {
          width: 280,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
          fixed: 'right',
        },
        fetchSetting: {
          pageField: 'pageIndex',
          totalField: 'totalCount',
          listField: 'list',
          sizeField: 'pageSize',
        },
      });
      function handleDetail(record: Recordable) {
        go('/abc/detail?blMerOrderNo=' + record.blMerOrderNo);
      }
      async function handleSync(record: Recordable) {
        await orderSync({ blMerOrderNo: record.blMerOrderNo });
        createMessage.success('同步完成');
      }
      async function handleResend(record: Recordable) {
        await orderReSend({ blMerOrderNo: record.blMerOrderNo });
        createMessage.success('同步完成');
      }
      async function exportOrder() {
        loading.value = true;
        const fieldsValue = getForm().getFieldsValue();
        const dataSource = await getList({
          pageIndex: 1,
          pageSize: 2147483647,
          blMerOrderNo: fieldsValue.blMerOrderNo,
          beginTime: fieldsValue.startTime,
          endTime: fieldsValue.endTime,
        });
        if (dataSource && dataSource.list && dataSource.list.length > 0) {
          jsonToSheetXlsx({
            data: dataSource.list.map(
              ({
                blMerOrderNo,
                rechargeAccount,
                productId,
                rechargeValue,
                orderState,
                ispName,
                productSalePrice,
                productCost,
                profit,
                orderTime,
              }) => {
                return {
                  blMerOrderNo,
                  rechargeAccount,
                  productId,
                  rechargeValue,
                  orderState,
                  ispName,
                  productSalePrice,
                  productCost,
                  profit,
                  orderTime,
                };
              },
            ),
            header: {
              blMerOrderNo: '商户订单号',
              rechargeAccount: '充值账号',
              productId: '产品编号',
              rechargeValue: '充值量',
              orderState: '订单状态',
              ispName: '运营商',
              productSalePrice: '销售价',
              productCost: '成本价',
              profit: '利润',
              orderTime: '客户下单时间',
            },
            filename: new Date().getTime() + '.xlsx',
            // json2sheetOpts: {
            //   // 指定顺序
            //   header: ['order_id', 'province'],
            // },
          });
        }
        loading.value = false;
      }

      return {
        loading,
        exportOrder,
        register,
        getList,
        orderSync,
        orderReSend,
        inputRef,
        handleDetail,
        handleSync,
        handleResend,
      };
    },
  });
</script>
